<template>
    <t-row style="background-color: white;margin-top: 10px;">
        <t-col :span="11">

        </t-col>
        <t-col :span="1">
            <div style="padding-top: 10px;padding-bottom: 10px;"> <t-button theme="primary" variant="base"
                    @click="showAddDialog">添加</t-button></div>
        </t-col>
    </t-row>
    <t-table row-key="id" :columns="columns" :data="data" :expanded-row-keys="expandedRowKeys" :expandIcon="expandIcon"
        :expandOnRowClick="expandOnRowClick" :horizontalScrollAffixedBottom="true" table-layout="auto"
        tableContentWidth="1200" lazyLoad resizable @expand-change="rehandleExpandChange">
        <template #createTime="{ row }">
            {{ fmtTime(row.createTime) }}
        </template>
        <template #status="{ row }">
            <t-tag theme="primary" v-if="row.status == 1">启用</t-tag>
            <t-tag theme="danger" v-if="row.status == 0">禁用</t-tag>
        </template>
        <template #op="{ row }">
            <t-space>
                <t-button variant="outline" theme="danger" ghost>删除</t-button>
                <t-button variant="outline" theme="primary" ghost @click.stop="edit(row.id)">编辑</t-button>
                <t-button variant="outline" theme="primary" v-if="row.status == 0" ghost>启用</t-button>
                <t-button variant="outline" theme="danger" v-if="row.status == 1" ghost>禁用</t-button>
            </t-space>
        </template>
        <template #expandedRow="{ row }">
            <t-table bordered row-key="index" :data="row.nursingProjects" :columns="child_columns" />
        </template>
    </t-table>
</template>

<script setup lang="ts">
import columns from '../columns'
import child_columns from '../child_columns'
import { ref } from 'vue'
import dayjs from 'dayjs'

const props = defineProps(['data'])
const emits = defineEmits(['showAddDialog', 'showEditDialog'])
// 默认展开哪个条目
const expandedRowKeys = ref([]);
// 显示箭头，表示有展开效果
const expandIcon = ref(true);
// 点击行任意位置都可以展开
const expandOnRowClick = ref(true)

// 点击编辑
const edit = (id) => {
    // 弹出编辑对话框
    emits('showEditDialog', id)
}
// 使用dayjs格式化时间
const fmtTime = (time) => {
    // 格式化日期
    return dayjs(time).format('YYYY/MM/DD')
}

// 表格项点击互斥效果
const rehandleExpandChange = (value, params) => {
    let arry = []
    if (value.length > 1) {
        arry.push(value[value.length - 1])
        expandedRowKeys.value = arry
    } else {
        expandedRowKeys.value = value
    }
};

// 显示添加对话框
const showAddDialog = () => {
    emits('showAddDialog')
}
</script>